﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">
          var map = null;
          function GetMap() {
              map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
                           { credentials: "Your Bing Maps Key",
                               center: new Microsoft.Maps.Location(45.5, -122.5),
                               mapTypeId: Microsoft.Maps.MapTypeId.road,
                               zoom: 7
                           });


        }


        function addRandomPins(num) {
            var bounds = map.getBounds();
            var northWest = bounds.getNorthwest();
            var southEast = bounds.getSoutheast();
            var lngSpan = northWest.longitude - southEast.longitude;
            var latSpan = southEast.latitude - northWest.latitude;

            var start = new Date().getTime();
            var shapes = [];
            for (i = 0; i < num; i++) {
                // Add a pin to the center of the map
                var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(northWest.latitude + latSpan * Math.random(), southEast.longitude + lngSpan * Math.random()));
                map.entities.push(pin);
            }

            var end = new Date().getTime();
            var time = end - start;
            document.getElementById("results").value += '\nExecution time: ' + time;
        }
      </script>
   </head>
   <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:800px; height:600px;"></div>     
      <p><input type="text" id="numpins" value="100" /><input type="button" value="add pins" onclick="addRandomPins(document.getElementById('numpins').value)" /></p>
      <textarea id="results" cols="50" rows="10"></textarea>        
   </body>
</html>